<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <meta charset="UTF-8">
    <title>图书管理系统-图书管理</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}"/>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/lib/jquery-1.11.0.min.js}"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div th:replace="inc/top :: div"></div>
    <div th:replace="inc/left :: div"></div>
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;" id="lay_body">
            <div style="">
                <button class="layui-btn" id="addBook">
                    <i class="layui-icon">&#xe608;</i> 添加图书
                </button>
            </div>
            <table class="layui-table">
                <thead>
                <tr>
                    <td width="50" align="center">序号</td>
                    <td align="center">书名</td>
                    <td align="center">作者</td>
                    <td align="center">出版社</td>
                    <td align="center">价格</td>
                    <td align="center">出版时间</td>

                    <td th:width="250" align="center">操作</td>
                </tr>
                </thead>
                <tbody id="dataTbody">
                </tbody>
            </table>
            <div id="page"></div>
        </div>
    </div>
    <div th:replace="inc/foot :: div"></div>
</div>
<script>
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
    });
</script>
<script>
    let page = 0;// 当前页，初始值设为 0
    let size = 10;// 每页条数，初始值设为 10
    let total;// 总记录数
    $(document).ready(function () {
        getInfo();// 获取数据
        toPage();// 进行分页
    });

    // 获取数据
    function getInfo() {
        $.ajax({
            type: "post",
            url: "bookData",
            async: false,// 设置同步请求，加载数据前锁定浏览器
            dataType: 'json',
            data: {
                "page": page, // 查询页码
                "size": size, // 每页条数
            },
            success: successFu
        });
    }

    // 数据请求成功
    function successFu(pager) {
        //console.log(pager);
        // 1.清空原数据
        $("#dataTbody").html("");
        // 2.重新赋值页码、条数、总记录数
        page = pager.bookPage.psize;
        size = pager.bookPage.pindex;
        total = pager.bookPage.pcount;
        // 3.渲染数据
        // 当前查询无数据时
        if (pager.bookPage.pcount == 0) {
            $("#dataTbody").html("<tr><td colspan='7' class='text-center'>暂无数据</td></tr>");
            return;
        }
        let text = "";
        $.each(pager.book, (i, item) => {
            text += `
            <tr>
                    <th width="50">${i + 1}</th>
                    <th align="center">${item.name}</th>
                    <th align="center">${item.author}</th>
                    <th align="center">${item.press}</th>
                    <th align="center">${item.price}</th>
                    <th align="center">${item.pressDate}</th>
                    <th width="350" align="center">
                        <a class="layui-btn layui-btn-xs" onclick="edit(${item.id})">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" onclick="delect(${item.id})">删除</a>
                        <a class="layui-btn layui-btn-primary layui-btn-xs" onclick="hot(${item.id})">设置热门图书</a>
                        <a class="layui-btn layui-btn-primary layui-btn-xs" onclick="newBook(${item.id})">设置推荐图书</a>
                    </th>
            </tr>
             `;
        });
        $("#dataTbody").html(text);
    }

    // 进行分页
    function toPage() {
        layui.use('laypage', function () {
            let laypage = layui.laypage;
            // 调用分页
            laypage.render({
                // 分页容器的id
                elem: 'page',// *必选参数
                // 数据总数，从服务端得到
                count: total,// *必选参数
                // 每页显示的条数。laypage将会借助 count 和 size 计算出分页数。
                //size:size,
                // 起始页
                //page:Pager,
                // 连续出现的页码个数
                //groups:5,
                // 自定义每页条数的选择项
                limits: [10, 25, 50, 100],
                // 自定义首页、尾页、上一页、下一页文本
                first: '首页',
                last: '尾页',
                prev: '<em><<</em>',
                next: '<em>>></em>',
                // 自定义排版
                layout: ['count', 'prev', 'page', 'next', 'size', 'skip'],
                // 渲染数据
                jump: function (data, first) {
                    // data包含了当前分页的所有参数
                    page = data.curr - 1;
                    size = data.limit;
                    // 首次不执行
                    if (!first) {
                        getInfo();
                    }
                }
            });
        })
    }

</script>
<script type="text/javascript">
    var layer;
    layui.use('layer', function () {
        layer = layui.layer;
    });

    $(function () {
        $('#menu a').each(function () {
            var aText = $(this).text();
            if ('图书管理' == aText) {
                $(this).parent('dd').addClass('layui-this');
            }
        });

        $('#addBook').on('click', function () {
            window.location = 'saveBookPage';
        });

    });


    //删除
    function delect(id) {
        var url = '/admin/book/delect/' + id;
        if (window.confirm('你确定要删除图书吗？')) {
            $.post(url, {}, function (json) {
                alert(json.info);
                window.location.reload();
            });
            return true;
        } else {
            //alert("取消");
            return false;
        }
    }

    //修改
    function edit(id) {
        var url = 'editBookPage/' + id;

        window.location = url;
    }

    function hot(id) {
        var url = '/admin/book/hot/' + id;
        $.post(url, {}, function (data) {
            alert(data.info);
        })
    }

    function newBook(id) {
        var url = '/admin/book/newBook/' + id;
        $.post(url, {}, function (data) {
            alert(data.info);
        })
    }

</script>

</body>

</html>